[[ define "home/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->

   
<!-- 获取列表数据的部分 -->
    <div class="section">
        <h2>1. 获取列表</h2>
        <div class="card">
            <div class="inline-group">
                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" id="getAll" checked> 
                        获取所有项目
                    </label>
                </div>
                <button onclick="getItems()">获取列表</button>
            </div>
        </div>
        
        <div class="result-box">
            <div id="loading1" class="loading" style="display:none;">加载中...</div>
            <div id="itemsList"></div>
        </div>
    </div>
    
    <!-- 提交数据的部分 -->
    <div class="section">
        <h2>2. 提交数据</h2>
        <div class="card">
            <div class="submit-group">
                <input type="text" id="contentInput" placeholder="请输入要提交的内容">
                <button onclick="submitContent()" id="submitBtn">提交内容</button>
            </div>
        </div>
        
        <div class="result-box">
            <div id="loading2" class="loading" style="display:none;">提交中...</div>
            <div id="submitResult"></div>
        </div>
    </div>
    
    <script>
        // 1. 获取列表数据（POST方式）- 手动触发
        function getItems() {
            const itemsList = document.getElementById('itemsList');
            const loading = document.getElementById('loading1');
            const getAll = document.getElementById('getAll').checked;
            
            // 清空之前的结果
            itemsList.innerHTML = '';
            loading.style.display = 'block';
            
            // POST请求，携带参数
            fetch('/api/items', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    type: getAll ? 'all' : 'normal'
                })
            })
            .then(response => response.json())
            .then(data => {
                loading.style.display = 'none';
                
                if (data.code === 200) {
                    let html = '<div class="list-title">项目列表：</div>';
                    if (data.data && data.data.length > 0) {
                        data.data.forEach(item => {
                            html += `<div class="item">${item.ID}. ${item.Name}</div>`;
                        });
                        html += `<div style="margin-top: 10px; color: #666;">共 ${data.data.length} 个项目</div>`;
                    } else {
                        html += '<div class="item">暂无数据</div>';
                    }
                    itemsList.innerHTML = html;
                } else {
                    itemsList.innerHTML = `<div class="error">获取失败：${data.msg}</div>`;
                }
            })
            .catch(error => {
                loading.style.display = 'none';
                itemsList.innerHTML = `<div class="error">请求失败：${error}</div>`;
            });
        }
        
        // 2. 提交数据 - 手动触发
        function submitContent() {
            const input = document.getElementById('contentInput');
            const resultDiv = document.getElementById('submitResult');
            const loading = document.getElementById('loading2');
            const submitBtn = document.getElementById('submitBtn');
            const content = input.value.trim();
            
            if (!content) {
                resultDiv.innerHTML = `<div class="error">请输入内容</div>`;
                return;
            }
            
            // 清空之前的结果
            resultDiv.innerHTML = '';
            loading.style.display = 'block';
            
            // 禁用提交按钮，防止重复提交
            submitBtn.disabled = true;
            submitBtn.innerHTML = '提交中...';
            
            fetch('/api/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ content: content })
            })
            .then(response => response.json())
            .then(data => {
                loading.style.display = 'none';
                submitBtn.disabled = false;
                submitBtn.innerHTML = '提交内容';
                
                if (data.code === 200) {
                    resultDiv.innerHTML = `<div class="success">
                        <div>提交成功！</div>
                        <div style="margin-top: 5px;">提交的内容：${content}</div>
                    </div>`;
                    // 清空输入框
                    input.value = '';
                } else {
                    resultDiv.innerHTML = `<div class="error">${data.msg}</div>`;
                }
            })
            .catch(error => {
                loading.style.display = 'none';
                submitBtn.disabled = false;
                submitBtn.innerHTML = '提交内容';
                resultDiv.innerHTML = `<div class="error">请求失败：${error}</div>`;
            });
        }
        
        // 添加Enter键提交功能
        document.getElementById('contentInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitContent();
            }
        });
    </script>



[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]